<template>
<el-container>
  <el-header style="height: auto;">
    <el-form>
      <el-row>
        <el-col class="box" :xl="{ span: 6 }" :lg="{ span: 6 }">
          <el-form-item label="下游代理" label-width="80px">
            <el-select v-model="value" placeholder="请选择卡来源" style="width: 95%;" size="small">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col class="box" :xl="{ span: 6 }" :lg="{ span: 6 }">
          <el-form-item label="客户名称" label-width="80px">
            <el-select v-model="value" placeholder="请选择卡体类型" style="width: 95%;" size="small">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col class="box" :xl="{ span: 6 }" :lg="{ span: 6 }">
          <el-form-item label="业务号码" label-width="80px">
            <el-select v-model.trim="value" placeholder="请选择客户范围" style="width: 95%;" size="small">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col class="box" :xl="{ span: 6 }" :lg="{ span: 6 }">
          <el-form-item label="卡状态" label-width="80px">
            <el-select v-model="value" placeholder="请选择客户类型" style="width: 100%;" size="small">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="box" :xl="{ span: 6 }" :lg="{ span: 6 }">
          <el-form-item label="所属通道" label-width="80px" style="width: 95%;">
            <el-input size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }">
          <el-form-item class="export">
            <el-button size="small">查询</el-button>
            <el-button size="small">导出</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-header>
  <el-main>
    <el-form>
      <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="agentName" label="序号" align="center"></el-table-column>
        <el-table-column prop="dictAgentTypeName" label="业务号码" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="toEcharts">{{ scope.row.dictAgentTypeName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="dictRealNameName" label="是否实名" align="center"></el-table-column>
        <el-table-column prop="dictStatusName" label="卡用途" align="center"></el-table-column>
        <el-table-column prop="pidName" label="卡状态" align="center"></el-table-column>
        <el-table-column prop="employeeName" label="卡体类型" align="center"></el-table-column>
        <el-table-column prop="alipayName" label="流量池" align="center"></el-table-column>
        <el-table-column prop="alipayLoginName" label="二级流量池" align="center"></el-table-column>
        <el-table-column prop="phone" label="本月充值" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="剩余流量" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="本月已用（实际）" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="本月已用（虚量）" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="cardCount" label="操作" align="center">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
              <el-dropdown-menu slot="dropdown">
                <el-button class="operation" @click="getUser(scope.row)">停卡</el-button>
                <el-button class="operation" @click="operation.resetPassword = true">启用</el-button>
                <el-button class="operation" @click="toEdit">限速</el-button>
                <el-button class="operation" @click="operation.accountRecharge = true">禁用</el-button>
                <el-button class="operation" @click="toRecord">更新</el-button>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="prev, pager, next, jumper" :page-count="maxPage" :hide-on-single-page="value" background></el-pagination>
      </div>
    </el-form>
    <el-row class="data">
      <el-col :span="24"><span>总条数</span><span class="echo">10000</span><span>总用量</span><span class="echo">507987G</span><span>剩余用量</span><span class="echo">200000G</span><span>静默期预警</span><span class="echo">100条</span><span>预警时间</span><span class="echo">提前15天</span><span>已激活</span><span class="echo">9800</span><span>未激活</span><span class="echo">200</span></el-col>
    </el-row>
  </el-main>
</el-container>
</template>

<script>
  import { userManagement } from '@/api/getData'

  export default {
    name: 'List',
    data() {
      return {
        maxPage: 1,
        tableData: [],
        pageSize: 10,
        currentPage: 1,
        ascs: [],
        descs: []
      }
    },
    methods: {
      async initData(theKey) {
        const returnData = await userManagement({
          page: {
            current: this.currentPage + '',
            size: this.pageSize + '',
            ascs: this.ascs,
            descs: this.descs
          }
        }, {
          obj: this,
          key: 'tableLoading;' + theKey
        })
        this.tableData = []
        //console.log(returnData)
        if (returnData._result) {
          this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
          // 数据回显
          returnData.data.records.map(item => {
            const obj = {}
            obj.id = item.id
            obj.id = item.id
            obj.agentName = item.agentName // 代理名称
            obj.dictAgentTypeName = item.dictAgentTypeName // 代理类型
            obj.dictRealNameName = item.dictRealNameName // 实名类型
            obj.dictStatusName = item.dictStatusName // 用户状态
            obj.pidName = item.pidName // 所属关系
            obj.employeeName = item.employeeName // 业务员
            obj.telephone = item.telephone // 代理联系电话
            obj.alipayName = item.alipayName // 支付宝户名
            obj.alipayLoginName = item.alipayLoginName // 支付宝账号
            obj.cardCount = item.cardCount // 拥有卡数
            obj.balance = item.balance // 余额
            obj.insertTimeDate = item.insertTimeDate // 创建时间
            this.tableData.push(obj)
          })
          this.tableLoading = false
        }
      },
      toEcharts() {
        this.$router.push({ path: '/user/echarts' })
      }
    },
    created() {
      this.initData()
    }
  }
</script>

<style scoped lang="scss">
  .el-container {
    .el-header {
      margin-top: 3vh;
      .box /deep/ label {
        text-align: left;
      }

      .line {
        text-align: center;
      }

      .el-form-item {
        margin-bottom: 10px;
      }

      .export {
        margin-bottom: 0px;
      }

      .export /deep/ button {
        margin-right: 10px;
      }
    }

    .el-main {
      .el-form-item {
        margin-bottom: 10px;
      }
      .el-dropdown-link {
        font-size: 20px;
        cursor: pointer;
      }
      .block {
        float: right;
        position: relative;
        top: 37px;
      }
      .data /deep/ span {
        text-align: justify;
        font-size: 14px;
        font-family: 微软雅黑;
        line-height: 40px;
        color: #606266;
        font-weight: 700;
      }
      .data {
        position: relative;
        top: -32px;
        .el-col {
          display: flex;
          justify-content: space-between;
          span {
            width: 6vw;
            display: inline-block;
            text-align: center;
          }
        }
      }
    }
  }
  .el-popper[x-placement^=bottom] {
    margin-right: -25px;
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
  .el-popper[x-placement^=top] {
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;
    margin-right: -25px;
    button {
      display: block;
    }
    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
</style>
